<!-- 企业认证审核 -->
<template>
  <div class="app-container">
    <el-tabs
      v-model="tabNum"
      @tab-click="tabClickBtn"
      style="background:#fff;padding-left:10px;"
    >
      <!-- 待审批 -->
      <el-tab-pane
        label="待审批"
        name="1"
      >
        <avue-crud
          ref="crud1"
          :option="option_1"
          :data="data_1"
          :table-loading="loading_1"
          :page.sync="page_1"
          @on-load="onLoad_1"
          @search-change="searchChange_1"
          @search-reset="resetChange_1"
          :search.sync="search_1"
        >
          <template
            slot="menu"
            slot-scope="scope"
          >
            <el-button
              size="small"
              type="text"
              @click="verify(scope.row)"
              icon="el-icon-document-checked"
            >审核</el-button>
          </template>
        </avue-crud>
      </el-tab-pane>
      <!-- 已审批 -->
      <el-tab-pane
        label="已审批"
        name="2"
      >
        <avue-crud
          ref="crud2"
          :option="option_2"
          :data="data_2"
          :table-loading="loading_2"
          :page.sync="page_2"
          @on-load="onLoad_2"
          @search-change="searchChange_2"
          @search-reset="resetChange_2"
          :search.sync="search_2"
        >
          <template
            slot="menu"
            slot-scope="scope"
          >
            <el-button
              size="small"
              type="text"
              @click="viewOpen(scope.row)"
              icon="el-icon-document-checked"
            >查看</el-button>
          </template>
        </avue-crud>
      </el-tab-pane>
    </el-tabs>

    <el-dialog
      :title="dialogTitle"
      class="avue-dialog"
      :visible.sync="dialogVisble"
      width="60%"
      center
      @close='closeDialog'
    >
      <div v-loading="Loading">
        <simpleTableTwo :Data="simpleTableData"></simpleTableTwo>
        <el-tabs>
          <el-tab-pane label="营业执照">
            <el-image
              v-for="item in srcList"
              :key="item"
              style="width: 200px; height: 200px"
              :src="item"
              :preview-src-list="srcList"
            ></el-image>
          </el-tab-pane>
        </el-tabs>
        <el-tabs v-if="dialogType === 'verify'">
          <el-tab-pane label="审核">
            <el-form
              :model="verifyData"
              ref="verifyForm"
            >
              <el-form-item
                label=""
                prop="verifyResult"
                :rules="[{ required: true, message: '请选择审核状态', trigger: 'blur' }]"
              >
                <el-radio-group v-model="verifyData.verifyResult">
                  <el-radio :label="1">通过</el-radio>
                  <el-radio :label="3">拒绝</el-radio>
                </el-radio-group>
              </el-form-item>
              <el-row>
                <el-col :span="11">
                  <el-form-item
                    label="备注"
                    prop="remark"
                    v-if="verifyData.verifyResult == 3"
                    :rules="[{ required: true, message: '请输入拒绝原因', trigger: 'blur' }]"
                  >
                    <el-input
                      type="textarea"
                      :rows="4"
                      v-model="verifyData.remark"
                    ></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
            </el-form>
          </el-tab-pane>
        </el-tabs>
        <el-tabs v-if="dialogType === 'view'">
          <el-tab-pane label="认证记录">
            <el-table
              :data="viewTableData"
              border
            >
              <el-table-column
                prop="createTime"
                label="创建时间"
                align="center"
              ></el-table-column>
              <el-table-column
                prop="updateTime"
                label="审批时间"
                align="center"
              ></el-table-column>
              <el-table-column
                prop="updateBy"
                label="审批人"
                align="center"
              ></el-table-column>
              <el-table-column
                prop="rzstatus"
                label="认证结果"
                align="center"
              >
                <template slot-scope="scope">
                  {{ scope.row.rzstatus == 1 ? "成功" : "失败" }}
                </template>
              </el-table-column>
              <el-table-column
                prop="comment"
                label="备注"
                align="center"
              ></el-table-column>
            </el-table>
          </el-tab-pane>
        </el-tabs>
        <div class="dialog-footer">
          <el-button
            type="primary"
            v-if="dialogType === 'verify'"
            @click="verifySave('verifyForm')"
            round
          >保存</el-button>
          <el-button
            @click="clousBtn('verifyForm')"
            v-if="dialogType === 'verify'"
            type="primary"
            plain
            round
          >取消</el-button>
          <el-button
            @click="clousBtnTwo"
            v-if="dialogType === 'view'"
            type="primary"
            plain
            round
          >关闭</el-button>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  getPCQyrzList,
  searchRzxx,
  updateRzxx,
  searchRzxxDetail,
} from '@/api/manager.js'
import simpleTableTwo from './components/simpleTableTwo.vue'
import {
  rzztDic,
  activeList,
  createStepList,
  authStatusDic,
  viewDataInfo,
  viewDataInfoTwo,
} from './finance.util'
import mixin from './../work/mixin.vue'

const _option = {
  headerAlign: 'center',
  align: 'center',
  border: true,
  index: true,
  indexLabel: '序号',
  indexWidth: 100,
  card: true,
  labelWidth: 135,
  delBtn: false,
  editBtn: false,
  excelBtn: false,
  selection: false,
  searchLabelWidth: '25%',
  searchSpan: 6,
  searchMenuSpan: 4,
  columnBtn: false,
  refreshBtn: false,
  selectClearBtn: false,
  addBtn: false,
  searchShowBtn: false,
  column: [
    {
      label: '企业名称',
      prop: 'qymc',
      search: true,
      order: 10,
      width: '260',
    },
    {
      label: '统一社会信用代码',
      prop: 'tyshxydm',
      order: 10,
      width: '200',
    },
    {
      label: '法人姓名',
      prop: 'frxm',
      order: 11,
    },
    {
      label: '认证发起人',
      prop: 'name',
      search: true,
      order: 11,
    },
    {
      label: '创建时间',
      prop: 'create_time',
      order: 21,
      width: '250',
    },
  ],
}

export default {
  components: {
    simpleTableTwo,
  },
  mixins: [mixin],
  data() {
    return {
      tabNum: '1',
      loading_1: false,
      loading_2: false,
      page_1: {
        pageSize: 10,
        currentPage: 1,
        total: 0,
        background: false,
      },
      page_2: {
        pageSize: 10,
        currentPage: 1,
        total: 0,
        background: false,
      },
      data_1: [],
      data_2: [],
      option_1: {},
      option_2: {},
      search_1: {
        //productName:'awd'
      },
      search_2: {},
      dialogTitle: '审核',
      dialogVisble: false,
      simpleTableData: [],
      dialogType: 'verify',
      verifyData: {
        verifyResult: '',
        remark: '',
      },
      payData: {
        fkcp: '',
        fkje: '',
        fkrq: '',
      },
      stepActive: '',
      stepList: [],
      viewTableData: [],
      srcList: [],
      Loading: false,
    }
  },
  created() {
    const { column } = _option
    const rzztDicData = Object.keys(authStatusDic).map((i) => {
      return {
        label: authStatusDic[i],
        value: Number(i),
      }
    })
    console.log('rzztDicData', rzztDicData)
    this.option_1 = {
      ..._option,
      column: [
        ...column,
        {
          label: '日期范围',
          prop: 'daterange',
          search: true,
          hide: true,
          searchRange: true,
          type: 'daterange',
          format: 'yyyy-MM-dd',
          valueFormat: 'yyyy-MM-dd',
        },
      ],
    }
    this.option_2 = {
      ..._option,
      column: [
        ...column,
        {
          label: '认证状态',
          prop: 'rzstatus',
          search: true,
          type: 'select',
          order: 20,
          dicData: rzztDicData,
        },
      ],
    }
  },
  computed: {
    headers() {
      return {
        TOKEN: this.$store.getters.token,
      }
    },
  },
  filters: {
    // filterQylx(val,qylxList){
    // }
  },
  methods: {
    tabClickBtn(e) {
      if (e.index == 0) {
        this.onLoad_1()
      } else {
        this.onLoad_2()
      }
    },
    onLoad_1() {
      console.log('NTAREA', this.search_1)
      const { daterange, name, qymc } = this.search_1
      const params = {
        qymc,
        username: name,
        startYmd: daterange ? daterange[0] : '',
        endYmd: daterange ? daterange[1] : '',
        pageNum: this.page_1.currentPage,
        pageSize: this.page_1.pageSize,
        status: 2,
      }
      this.loading_1 = true
      getPCQyrzList(params).then((data) => {
        console.log('data', data)
        if (data.status) {
          this.loading_1 = false
          this.data_1 = data.data.records
          this.page_1.total = data.data.total
        }
      })
    },
    onLoad_2() {
      console.log(this.search_2)
      const { rzstatus, name, qymc } = this.search_2
      const params = {
        qymc,
        username: name,
        pageNum: this.page_2.currentPage,
        pageSize: this.page_2.pageSize,
        status: rzstatus == 0 || rzstatus == undefined ? '1,3' : rzstatus,
      }
      this.loading_2 = true
      getPCQyrzList(params).then((data) => {
        if (data.status) {
          this.loading_2 = false
          this.data_2 = data.data.records
          this.page_2.total = data.data.total
        }
      })
    },
    /* 清空 */
    resetChange_1() {
      this.page_1.currentPage = 1
      this.page_1.pageSize = 10
      this.onLoad_1()
    },
    /* 清空 */
    resetChange_2() {
      this.page_2.currentPage = 1
      this.page_2.pageSize = 10
      this.onLoad_2()
    },
    /* 搜索筛选 */
    searchChange_1(params, done) {
      done()
      this.page_1.currentPage = 1
      this.page_1.pageSize = 10
      this.onLoad_1()
    },
    searchChange_2(params, done) {
      done()
      this.page_2.currentPage = 1
      this.page_2.pageSize = 10
      this.onLoad_2()
    },
    //审核按钮
    verify(row) {
      this.Loading = true
      let params = {
        pnumber: row.pnumber,
        shtyxydm: row.tyshxydm,
      }
      console.log(row)
      this.srcList = []
      this.simpleTableData = viewDataInfo(row)
      this.currentRow = row
      this.dialogType = 'verify'
      this.dialogVisble = true
      this.dialogTitle = '审核'
      searchRzxx(params).then((res) => {
        console.log(res.data)
        this.Loading = false
        if (res.status) {
          this.run(res.data.base64Code, res.data.printBk)
        }
      })
    },
    // 添加水印1
    async run(imgUrl, markText) {
      // 1.图片路径转成canvas
      const tempCanvas = await this.imgToCanvas(imgUrl)
      // 2.canvas添加水印
      //const markText = '我是水印'
      const canvas = this.addWatermark(tempCanvas, markText)
      // 3.canvas转成img
      const img = this.convasToImg(canvas)
      // 查看效果
      if (this.dialogVisble) {
        this.srcList.push(img.src)
      }
    },
    //审核保存按钮
    verifySave(verifyForm) {
      this.$refs[verifyForm].validate((valid) => {
        if (valid) {
          const { id } = this.currentRow
          const { verifyResult, remark } = this.verifyData //jrPass
          let params = {
            id,
            status: verifyResult,
            comment: remark,
          }
          updateRzxx(params).then((res) => {
            if (res.status) {
              this.$message({
                type: 'success',
                message: '操作成功!',
              })
              this.onLoad_1()
              this.dialogVisble = false
            } else {
              this.$message({
                type: 'error',
                message: res.data.msg,
              })
            }
          })
        }
      })
    },
    //关闭弹框
    clousBtn(verifyForm) {
      this.dialogVisble = false
      this.srcList = []
      this.$refs[verifyForm].resetFields()
    },
    clousBtnTwo() {
      this.dialogVisble = false
      this.srcList = []
    },
    closeDialog() {
      this.srcList = []
    },
    paySave() {
      this.$refs['payForm'].validate((valid) => {
        if (valid) {
          const { id } = this.currentRow
          const { fkje, fkrq, fkcp } = this.payData
          const params = {
            id,
            fkje,
            fkrq,
            fkcp,
          }
          jrOver(params).then((res) => {
            if (res.status) {
              this.$message({
                type: 'success',
                message: res.msg,
              })
            } else {
              this.$message({
                type: 'error',
                message: res.msg,
              })
            }
            this.dialogVisble = false
          })
        }
      })
    },
    //查看
    viewOpen(row) {
      this.Loading = true
      let params = {
        pnumber: row.pnumber,
        shtyxydm: row.tyshxydm,
      }
      console.log(row)
      this.dialogTitle = '查看详情'
      this.simpleTableData = viewDataInfoTwo(row)
      this.currentRow = row
      this.dialogVisble = true
      this.dialogType = 'view'
      searchRzxxDetail(params).then((res) => {
        console.log(res.data.rzRecords)
        this.Loading = false
        if (res.status) {
          this.viewTableData = res.data.rzRecords
          this.run(res.data.yyzzFile.base64Code, res.data.yyzzFile.printBk)
        }
      })
    },

    /* 改变页码 */
    currentChange(currentPage) {
      this.page.currentPage = currentPage
    },
  },
}
</script>

<style scoped="scoped" lang="scss">
/deep/ .avue-crud__pagination {
  text-align: center;
}
.dialog-footer {
  text-align: center;
  margin: 20px auto 50px;
  // padding-bottom: 50px;
}
</style>
